<template>
	<view>
		<view class="title">为你推荐</view>
		<view class="hotGoods">
			<u-waterfall v-model="hotGoodsList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="goodswarp" v-for="(item, index) in leftList" :key="index" @click="jumpPage(item.goods_id)">
						<u-tag v-if="item.q_id == 1" text="主推区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else-if="item.q_id == 2" text="优选区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else-if="item.q_id == 3" text="福利区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else text="超享区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-lazy-load threshold="200" :image="item.goods_image" :index="index"></u-lazy-load>
						<view class="sales" v-if="item.show_stock == 1">
							已售{{item.goods_sales}}件
						</view>
						<view class="goods_title">
							{{item.goods_name}}
						</view>
						
						<view class="cardFooter">
							<view class="price_txt" v-if="item.q_id == '1'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
								<!-- <view class="u_price">
									¥{{item.goods_sku.line_price}}
								</view> -->
							</view>
							<view class="price_txt" v-if="item.q_id == '2'">
								<view class="price" v-if="item.goods_min_point>0"> 
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '3'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '4'">
								<view class="price" v-if="item.goods_min_point>0"> 
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}"> 
					<view class="goodswarp" v-for="(item, index) in rightList" :key="index" @click="jumpPage(item.goods_id)">
						<u-tag v-if="item.q_id == 1" text="主推区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else-if="item.q_id == 2" text="优选区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else-if="item.q_id == 3" text="福利区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
							mode="dark" />
						<u-tag v-else text="超享区" class="typeTag" shape="circleRight" bg-color="#20cbd4" color="#0e595d"
								mode="dark" />
						<u-lazy-load threshold="200" :image="item.goods_image" :index="index"></u-lazy-load>
						<view class="sales" v-if="item.show_stock == 1">
							已售{{item.goods_sales}}件
						</view>
						<view class="goods_title">
							{{item.goods_name}}
						</view>
						<view class="cardFooter">
							<view class="price_txt" v-if="item.q_id == '1'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
								<!-- <view class="u_price">
									¥{{item.goods_sku.line_price}}
								</view> -->
							</view>
							<view class="price_txt" v-if="item.q_id == '2'">
								<view class="price" v-if="item.goods_min_point>0"> 
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '3'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '4'">
								<view class="price" v-if="item.goods_min_point>0"> 
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
		<u-loadmore :status="goodsStatus" v-if="hotGoodsList.length>0" color="#909399"/>
	</view>
</template>

<script>
	export default {
		props: ["hotGoodsList","goodsStatus"],
		data() {
			return {
			}
		},
		mounted() {
		},
		methods: {
			jumpPage(id){
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			}
		}
	}
</script>
<style>
	.title{
		background-size:cover;
		background-image: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/title1.png);
		background-position:center center;
		background-repeat:no-repeat no-repeat;
		text-align: center;
		margin: 30rpx 0 0 0;
	}
</style>
<style lang="scss" scoped>
	.hotGoods{
		margin: 10rpx 10rpx 10rpx;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}
	.goodswarp {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.goods_title {
		margin-top: 5px;
	}
	
	.price_txt{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	.u_price {
		font-size: 25rpx;
		color: #909399;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
	.typeTag{
		position: absolute;
		z-index: 1;
	}
	.cardFooter{
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	.sales{
		padding: 5rpx;
		text-align: center;
		font-size: 25rpx;
		background-color: #a0edf1;
		color: #0e595d;
		
	}
</style>
